<template>
	<view class="container">
		<view class="biaotou" style="width: 100%;">
			<view class="biaotou_title">客户手机号</view>
			<view class="biaotou_title">客户姓名</view>
			<view class="biaotou_title">登记日期</view>
		</view>
		<view class="table" style="width: 100%;" v-for="(item,index) in resultList">
			<view class="list_record_grey" v-if="index%2==0">
				<div class="list_record_text">
					{{item.custTel}}
				</div>
				<div class="list_record_text">
					{{item.custName}}
				</div>
				<div class="list_record_text">
					{{item.creDate}}
				</div>
			</view>
			<view class="list_record" v-if="index%2==1">
				<div class="list_record_text">
					{{item.custTel}}
				</div>
				<div class="list_record_text">
					{{item.custName}}
				</div>
				<div class="list_record_text">
					{{item.creDate}}
				</div>
			</view>
		</view>
		<view class="pagination" >
			<uni-pagination @change="change" :show-icon="true" :total=page.total :current=page.current :pageSize=page.pageSize title="标题文字"/>
		</view>

		<view class="bottomMenu">
			<view class="crz-btn" @click="back">
				返回
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				resultList: [],
				page:{
					total:1,
					current:1,
					pageSize:1
				},
				pageParam:{
					pageNum:1,
					pageSize:7
				}
			}
		},
		onLoad() {
			this.ajax(this.pageParam, "Ttkmnc/CustInfo/findList", "findList")
		},
		onShow() {},
		onHide() {},
		methods: {
			back() {
				uni.navigateTo({
					url: '../ttkmnk/applyPage'
				})
			},
			change(e) {
				this.pageParam.pageNum = e.current
				this.ajax(this.pageParam, "Ttkmnc/CustInfo/findList", "findList")
			},
			ajax: function(da, ur, key) { //封装ajax
				uni.request({
					// url: ur, //仅为示例，并非真实接口地址。
					url: this.$store.url.yuming + ur, //仅为示例，并非真实接口地址。
					data: da,
					method: 'POST',
					header: {
						'Content-Type': 'application/json;',
						token: uni.getStorageSync('authenticationToken'),
						// 'token': 'suxiang_testToken',
					},
					success: (res) => {
						if (res.data.code == "0000") {
							if (key == 'findList') {
								this.resultList = res.data.data.list
								this.page.current = res.data.data.pageNum
								this.page.pageSize = res.data.data.pageSize
								this.page.total = res.data.data.total
							}
						} else {
							if (res.data.msg) {
								uni.showModal({
									title: res.data.msg,
									showCancel: false
								});
							} else {
								uni.showModal({
									title: res.data.message,
									showCancel: false
								});
							}
						}
					}
				});
			}
		},
	}
</script>
<style>
	.bottomMenu {
		width: 100%;
		position: fixed;
		bottom: 0;
		margin-bottom: 10%;
	}
	
	.back-home {
		position: fixed;
		right: 20px;
		bottom: 20px;
		padding: 10px;
		border-radius: 50%;
		overflow: hidden;
		box-shadow: darkgrey 0px 0px 10rpx 5rpx;
		background: #fff;
		z-index: 99;
	}

	.back-home image {
		width: 50rpx;
		height: 50rpx;
		display: block;

	}

	.searchInput999 {
		width: 90%;
		margin: 0 auto;
		background: white;
		border-radius: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 56upx;
	}

	.search999 {
		width: 32upx;
		height: 32upx;
	}

	.searchBox999 {
		width: 56upx;
		height: 56upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.input999 {
		color: #999;
		width: 80%;
	}

	/* .scroll-Y {
			height: calc(100vh-59px);
			border: 1rpx  black;
		} */
	.outSide {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 80px;
		left: 0;
		right: 0;
		bottom: 10px;
	}

	.biaotou {
		top: 80px;
		background: #0b9b89;
		width: 100%;
		height: 60px;
	}

	.biaotou_title {
		width: 33%;
		float: left;
		color: #fff;
		display: flex;
		justify-content: center;
		line-height: 60px;
		font-size: 16px;
	}

	.list {
		width: 33%;
		height: 75px;
		float: left;
		color: #5b5b5b;
		text-align: center;
		overflow: hidden;
		font-size: 20px;
	}

	.list_record_grey {
		height: 75px;
		background-color:#f0f0f0
		/* margin-top: 75px; */
	}

	.list_record {
		height: 75px;
		background-color:#FFFFFF
		/* margin-top: 75px; */
	}
	
	.list_record_text {
		width: 33%;
		float: left;
		height: 75px;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}


	/* 搜索框 */
	.search-bar {
		width: 100%;
		height: 100rpx;
		margin-top: 2%;
	}

	.search-bar-box {
		display: flex;
		margin: 0 auto;
		width: 620rpx;
		height: 70rpx;
		border: 5rpx solid #00a8cc;
		border-radius: 50rpx;
	}

	.search-span {
		width: 100rpx;
		height: 56rpx;
		margin-top: 6rpx;
		margin-left: 30rpx;
	}

	.search-text {
		width: 100%;
		margin-top: 10rpx;
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #7f7f81;
	}

	.search-btn {
		background-color: #00a8cc;
		/* Green */
		color: white;
		text-align: center;
		display: inline-block;
		font-size: 35rpx;
		width: 240rpx;
		height: 70rpx;
		line-height: 65rpx;
		border-radius: 30rpx;
		letter-spacing: 3rpx;
	}
	
	.crz-btn {
		width: 92%;
		font-size: 32rpx;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #0b9b89;
		color: #FFFFFF;
		border-radius: 44rpx;
		text-align: center;
		margin: 30rpx;
	}
	
	.pagination {
		width: 92%;
		margin-left: 4%;
	    text-align: center;
		position: fixed;
		bottom: 0;
		margin-bottom: 40%;
	}
</style>
